<template>
  <div>
    <!-- 头部 -->
    <header>
      <div class="h45 bg-fff flex fcc rel">
        <i class="left-10 abs ml-10 iconfont iconleft" height="22px" width="15px"></i>
        <span>订单详情</span>
      </div>
    </header>

    <!-- 内容主体 -->
    <main class="bg-fff">
      <div class="h235">
        <p class="information pl-20 pt-25 pb-25">产品信息</p>
        <div class="lh pl-20">
          <p class="name">
            别墅名称 :
            <span class="pl-10 names">{{list.name}}</span>
          </p>
          <p class="name">
            房间数量 :
            <span class="pl-10 names">{{list.roomNum}}</span>
          </p>
          <p class="name">
            入住人数 :
            <span class="pl-10 names">{{list.peopleNum}}</span>
          </p>
          <p class="name">
            入住日期 :
            <span class="pl-10 names">2019-06-05</span>
          </p>
          <p class="name">
            退房日期 :
            <span class="pl-10 names">2019-06-05</span>
          </p>
        </div>
      </div>

      <div class="h235">
        <p class="information pl-20 pt-25 pb-25">订单信息</p>
        <div class="lhs pl-20">
          <p class="name">
            订单状态 :
            <span class="pl-10 names color">待支付</span>
          </p>
          <p class="name">
            订单编号 :
            <span class="pl-10 names">1000000000</span>
          </p>
          <p class="name">
            订单总价 :
            <span class="pl-10 names colors">￥4.822.00</span>
          </p>
          <p class="name">
            优惠金额 :
            <span class="pl-10 names">无优惠</span>
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: {}
    };
  },
  created() {
    this.gteList();
  },
  methods: {
    async gteList() {
      let orderId = this.$route.query.orderId;
      let data = {
        orderId
      };
      // console.log("data", data);
      let url = "/order/getDetail";
      let res = await this.$axios.post(url, data);
      this.list = res.order;
      // console.log("res", res);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/orderDetail.less";
</style>

